<template>
  <view class="content">
    <u-sticky :h5NavHeight="0">
      <!-- #ifndef MP-TOUTIAO -->
      <singleHeader pageTitle="评论管理"></singleHeader>
      <!-- #endif -->
      <pageHeader
        :items="items"
        :status="status"
        :filterStatus="filterStatus"
        :filter="filter"
        @change="change"
      >
      </pageHeader>
    </u-sticky>

    <pageList :items="list"></pageList>
    <toolsMore :status="moreStatus"></toolsMore>
    <pagePop ref="pop" @submit="submit"></pagePop>
  </view>
</template>

<script>
import singleHeader from "@/components/diySystemPage/components/singleHeader/index.vue";
import pageHeader from "./components/page-header.vue";
import pageList from "./components/page-list.vue";
import pagePop from "./components/page-pop.vue";
import toolsMore from "@/components/tools/tools-more.vue";

import { orderCommentList, commentDel, commentReply } from "@/api/admin";

export default {
  components: {
    singleHeader,
    pageHeader,
    pageList,
    pagePop,
    toolsMore,
  },

  data() {
    return {
      status: "",
      filterStatus: "",
      items: [
        { name: this.$t("newAdmin.order.all"), id: "" },
        { name: this.$t("goods.good"), id: "1", num: "" },
        { name: this.$t("goods.general"), id: "2", num: "" },
        { name: this.$t("goods.bad"), id: "3", num: "" },
      ],

      filter: [
        { name: "全部", id: "", num: "0" },
        { name: "未回复", id: "1", num: "0" },
        { name: "已回复", id: "2" },
      ],

      list: [],
      moreStatus: 1,
      page: 1,
      isEnd: false,
      item: null,
      goods_id: "",
      id: "", // 回复ID
    };
  },

  computed: {},

  onLoad(opi) {
    this.$utils.hideShareMenu();
    this.goods_id = opi.id;

    this.clearData();
  },

  onShow() {
    this.Emit.$on("handleList", this.handleList);
  },

  onHide() {
    this.Emit.$off("handleList");
  },

  methods: {
    submit(reply_content) {
      if (!reply_content) {
        this.$utils.toast("请输入回复内容！");
        return;
      }

      let { id } = this;

      commentReply({
        id,
        reply_content,
      },true)
        .then((res) => {

          if (res.code === 0) {
            let { pop } = this.$refs;
            pop.showInputPop = false;

            this.$utils.showModal("提示", "回复成功！", false, () => {
              this.clearData();
            });

            return;
          }
        })
        .catch((err) => {
          uni.showToast({
            title: err.msg,
            icon: "none",
          });
        });
    },

    handleList(type, id) {
      switch (type) {
        case "cancel":
          commentDel({
            id,
          }).then((res) => {
            if (res.code === 0) {
              this.clearData();
            }
            this.$utils.toast(res.msg);
          });
          break;

        case "reply":
          this.id = id;
          this.$refs.pop.showInputPop = true;
          break;
      }
    },

    clearData() {
      this.page = 1;
      this.isEnd = false;
      this.list = [];

      this.orderCommentList();
    },

    change({ el, id }) {
      this[el] = id;
      this.clearData();
    },

    orderCommentList() {
      let {
        list: oldList,
        page: pageNo,
        status,
        goods_id,
        items,
        filter,
        filterStatus: type,
      } = this;

      this.moreStatus = 2;
      orderCommentList({
        pageNo,
        status,
        type,
        pageSize: 20,
        goods_id,
      })
        .then((res) => {
          uni.stopPullDownRefresh();
          this.moreStatus = 1;

          if (res.code === 0) {
            let {
                list,
                totalCount,
                praise,
                medium_evaluatio,
                bad_num,
                all_reply,
                not_reply,
              } = res.data,
              count = parseInt(totalCount);

            this.$set(items[1], "num", praise);
            this.$set(items[2], "num", medium_evaluatio);
            this.$set(items[3], "num", bad_num);

            this.$set(filter[0], "num", all_reply);
            this.$set(filter[1], "num", not_reply);

            list.forEach((el) => {
              el.checked = false;
            });

            if (list.length) {
              oldList.push(...list);
              this.page = this.page + 1;
            }

            if (oldList.length >= count) {
              this.isEnd = true;
              this.moreStatus = 3;
            }
          }
        })
        .catch(() => {
          this.moreStatus = 1;
          uni.stopPullDownRefresh();
        });
    },
  },

  onReachBottom() {
    if (this.isEnd) {
      return;
    }

    this.orderCommentList();
  },

  onPullDownRefresh() {
    this.clearData();
  },
};
</script>

<style lang="less" scoped>
.content {
  position: relative;
  background: #f2f2f2;
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: border-box;
}
</style>
